<table id="emp_datagrid" ></table>
<div id="emp_list_toolbar">
    <a class="easyui-linkbutton" id="add_emp_btn" data-options="iconCls:'icon-add'" href="#">添加员工</a>
    <div style="float:right;margin-right:10px">
        <form>
        <input type="text" id="q" name="q" class="easyui-textbox"/>
        <a class="easyui-linkbutton" id='search_emp_btn' data-options="iconCls:'icon-search'">搜索</a>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#emp_datagrid').datagrid({
            url:'{% url 'easyui.emp_list'%}',//url地址，直接远程请求这个地址，默认POST方法
            columns:[[
                {field:'empno',title:'员工编号',width:100},
                {field:'ename',title:'姓名',width:120},
                {field:'sal',title:'工资',width:120},
                {field:'hiredate',title:'雇佣日期',width:150},
                {field:'dname',title:'部门',width:130,formatter:function(value,row,index){
                    return row['dept']['dname']
                }},
                {field:'aa',title:'操作',width:150,formatter:function(value,row,index){
                    //参数说明：value，单元格数据，row，整行数据集，index,行下表
                    return '<a href="javascript:updateEmp(\''+row['empno']+'\')" class="dg-linkbutton" style="margin-right:5px">修改</a><a href="javascript:removeEmp(\''+row['empno']+'\')" class="dg-linkbutton">删除</a>'
                }}
            ]],
            onLoadSuccess:function(){
                $('.dg-linkbutton').linkbutton({height:22,width:55})
            },
            pagination:true,    //是否带分页条，设置true之后，每次请求会携带参数page,rows.page表示当前页，rows表示每页记录数
            fitColumns:true,    //所有列占满整行
            fit:true,           //把自己界面“撑大”父容器
            singleSelect:true,  //单选行
            striped:true,
            toolbar:'#emp_list_toolbar' //加一个工具栏到表格上面

        })

        //添加搜索按钮点击事件
        $("#search_emp_btn").click(function(){
            //获取这个按钮所在form里面的值
            q = $('#q').val()
            console.log('q=',q)
            $('#emp_datagrid').datagrid('load',{
                q:q
            })
        })

        //添加员工按钮click事件
        $("#add_emp_btn").click(function(){
            //1查看作为对话框的div是否存在，不存在就新建一个
            var $win = $("#add_emp_win")
            if($win.length==0){
                //2添加一个div作为弹出对话框
                $win = $("<div id='add_emp_win'></div>")
                $win.appendTo($("body"))
            }
            //3打开
            $win.window({
                title:'添加员工-window',
                width:600,
                height:500,
                modal:true,
                maximizable:false,
                minimizable:false,
                collapsible:false,
                href:'{% url 'easyui.emp_add'%}'
            })
        })
    })

    function closeAddEmpWin(){
        $("#add_emp_win").window('close')
        //再刷新一下表格
        $('#emp_datagrid').datagrid('load')
    }

    function removeEmp(empno){
        //alert('removeEmp...'+empno)
        $.messager.confirm('提醒','您真的要删除吗？',function(r){
            if(r){
                $.get('{% url 'easyui.emp_delete'%}',{'empno':empno},function(datas){
                    if(datas.status){
                        //再刷新一下表格
                        $('#emp_datagrid').datagrid('load')
                    }
                }
            }
        })
    }

    function updateEmp(empno){
        //1.先弹出一个窗口，同时把empno传递到这个窗口中
        //2.弹出的窗口中发送一个请求获取更新页面，携带empno
        //3.显示更新页面内容
        var $win = $('#update_emp_window')
        if($win.length==0){
            $win = $('<div id="update_emp_window"></div>')
            $win.appendTo($('body'))
        }
        $win.window({
            title:'更新员工-window',
            width:600,
            height:500,
            modal:true,
            maximizable:false,
            minimizable:false,
            collapsible:false,
            href:'{% url 'easyui.emp_update'%}?empno='+empno
        })
        $win.window('center')
    }

    function closeUpdateEmpWin(){
        $("#update_emp_window").window('destroy')
        //再刷新一下表格
        $('#emp_datagrid').datagrid('reload')
    }
</script>